<!-- 找人 -->
<template>
	<view class="publishPeople">
		<view class="title-box">
			<view class="input-box flex alignCenter">
				<image src="/static/image/toolbox/edit.png"></image>
				<input class="font14" placeholder="请输入醒目的标题" v-model="forms.title"/>
			</view>
		</view>
		<view class="box2">
			<uni-mdlist :listData="otherArr" @clickItem="clickItem"></uni-mdlist>
		</view>
		<view class="box3">
			<view class="flex">
				<image src="/static/image/toolbox/edit.png"></image>
				<textarea class="font14" placeholder-class="font14 colorddd" v-model="forms.description" maxlength="100" placeholder="具体要求(100字)" cols="30" rows="10"></textarea>
				<view class="max-length font14 colorccc">{{forms.description.length}}/100</view>
			</view>
		</view>
		<view class="box4" v-if="!editId">
			<view class="title font14 bold color333 flex alignCenter"><image src="/static/image/icons/b.png" mode="aspectFill"></image> 设置赏金</view>
			<view class="tips font12 color999">只有找到后赏金才会支付给对方；如果没有找到，赏金会原路退回的</view>
			<view class="payOptions flex flexWrap alignCenter">
				<template v-for="(item,index) in payOptions">
					<view class="item font14 color333"  :key="index" v-show=" type==2 || (type==1 && item.money > 100)" :class="index == chooseIndex?'chooseItem':''" @click="chooseIndex = index">
						<text class="font16 bold">{{item.money}}</text> {{item.unit}}
					</view>
				</template>
			</view>
		</view>
		
		<view class="publishStyle bottom-btns" @click="handleSure"><i class="iconfont icon-fabu"></i>确定委托</view>
		
		<!-- 选择学校 -->
		<uni-chooseschool v-if="showProvince" :showProvince="showProvince" @schoolSuccess="schoolSuccess" @cancelProvince="cancelProvince"></uni-chooseschool>
		<!-- 选择专业 -->
		<uni-choosemajor v-if="showCollege" :school="otherArr[0].school" :showCollege="showCollege" @majorSuccess="majorSuccess" @cancelColl="cancelColl"></uni-choosemajor>
		
	</view>
</template>

<script>
	import { addFoundPerson,detailFoundPerson,enditFoundPerson} from "@/api/lookFor.js"
	import uniChoosemajor from "@/pages/send/components/uni-choosemajor/uni-choosemajor.vue"
	export default {
		components:{
			uniChoosemajor
		},
		data() {
			return {
				showProvince: false,
				showCollege: false,
				otherArr:[{
					title:'大学',
					icon:'/static/image/setting/major.png',
					school:'',
					val:''
				},{
					title:'专业',
					icon:'/static/image/setting/major.png',
					college:'',
					major:'',
					val:''
				}],
				
				type: 2,//1、委托找人，2、发布找人
				info: {},//学长学姐信息
				editId: '',
				forms: {
					title: '',
					description: '',
				},
				
				chooseIndex: 0,
				payOptions: [
					{id: 1, money: '8', unit: '元'},
					{id: 2, money: '18', unit: '元'},
					{id: 3, money: '28', unit: '元'},
					{id: 4, money: '68', unit: '元'},
					{id: 5, money: '108', unit: '元'},
					{id: 6, money: '168', unit: '元'},
					{id: 7, money: '288', unit: '元'},
					{id: 8, money: '308', unit: '元'},
				],
			}
		},
		onLoad(options) {
			console.log(options);
			this.type = options.type;
			if(options.items){
				this.info = JSON.parse(options.items);//委托找人时需要
			}
			let title = '发布找人信息';
			if(options.editId){
				this.editId = options.editId;//编辑找人信息时需要
				title="修改找人信息";
				this.getDetail();
			}
			this.chooseIndex = 0;
			if(options.type == 1){
				title = '委托Ta找人';
				this.chooseIndex = 4;
			}
			uni.setNavigationBarTitle({
			    title: title		
			})
		},
		methods: {
			getDetail(){
				detailFoundPerson({id: this.editId}).then(res=>{
					if(res.code == 100000){
						this.otherArr[0].school={
							title:res.data.schoolName,
							schoolCode:res.data.schoolCode
						}
						this.otherArr[0].val=res.data.schoolName
						this.otherArr[1].major={
							title:res.data.majorName,
							majorCode:res.data.majorCode
						}
						this.otherArr[1].val = res.data.majorName
						this.forms.title = res.data.title;
						this.forms.description = res.data.description;
					}
	
				})
			},
			
			// 列表功能的点击事件
			clickItem(item){
				if(item.title=='大学'){
					this.showProvince=true
					return
				}else if(item.title=='专业'){
					if(!this.otherArr[0].school){
						uni.showToast({
							icon:'none',
							title:'请先选择学校'
						})
						return
					}
					this.showCollege=true
					return
				}
			},
			cancelProvince(){
				this.showProvince=false
			},
			cancelColl(){
				this.showCollege=false
			},
			
			// 选择学校后的确定回调事件
			schoolSuccess(item){
				this.showProvince=false
				this.otherArr.forEach((val)=>{
					if(val.title=='大学'){
						val.val=item.school.title;
						val.school=item.school;
					}else if(val.title=='专业'){
						val.val = '';
						val.school = '';
					}
				})
			},
			// 选择专业后的确定回调事件
			majorSuccess(item){
				this.showCollege=false
				this.otherArr.forEach((val)=>{
					if(val.title=='专业'){
						val.val=item.major.title;
						val.college=item.college;
						val.major=item.major;
						return
					}
				})
			},
			
			// 确认委托
			handleSure(){
				if(!this.forms.title){
					return uni.showToast({
						icon:'none',
						title:'请输入标题'
					})
				}
				this.otherArr.forEach((item)=>{
					if(!item.val){
						uni.showToast({
							title:`请选择${item.title}`,
							icon:'none'
						})
						return
					}
				})
				
				if(!this.forms.description){
					return uni.showToast({
						icon:'none',
						title:'请输入具体要求'
					})
				}
				
				let param = {
					title: this.forms.title,
					schoolCode:this.otherArr[0].school.schoolCode,
					schoolName:this.otherArr[0].school.title,
					majorCode:this.otherArr[1].major.majorCode,
					majorName:this.otherArr[1].major.title,
					// bounty: '0.01',//赏金
					bounty:  this.payOptions[this.chooseIndex].money,//赏金
					description: this.forms.description,
				};
				console.log(this.editId)
				if(this.editId){
					// 编辑找人信息
					param.id = this.editId;
					enditFoundPerson(param).then(res=>{
						if(res.code == 100000){
							uni.showToast({
								title: '修改找人信息成功',
								icon: 'none'
							})
							uni.navigateTo({
								url: `/pages/send/lookFor/lookHomepage/lookHomepage?id=${this.editId}`
							})
						}
					})
					return
				}
				// 点击跳转支付，支付成功后返回提示”发布成功“。
				addFoundPerson(param).then(res=>{
					if(res.code == 100000){
						let query = {
							type: 6,
							money: this.payOptions[this.chooseIndex].money,
							id: res.data,
							info: this.info
						}
						// 新增成功找人数据成功后,判断是否委托找人.是则关联委托人id,否则继续往下执行
						uni.navigateTo({
							url: '/pages/order/order?query='+JSON.stringify(query)
						})
						
					}
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.publishPeople{
		background: rgba(235, 238, 239, 0.8);
		min-height: 100vh;
		.title-box{
			.input-box{
				background: #fff;
				justify-content: flex-start;
				border-top: 2px solid rgba(242, 242, 242, 1);
				height: 68rpx;
				input{
					margin: 0 10rpx;
					width: 100%;
				}
				image{
					width: 36rpx;
					height: 36rpx;
					margin: 0 20rpx 0 40rpx;
				}
			}
		}
		
		.box2{
			background: #fff;
			margin-top: 30rpx; 
		}
		
		.box3{
			margin-top: 30rpx;
			background: #fff;
			height: 300rpx;
			>view{
				padding-top: 20rpx;
			}
			image{
				width: 36rpx;
				height: 36rpx;
				margin: 0 20rpx 0 40rpx;
			}
			
			.max-length{
				position: absolute;
				right: 32rpx;
				margin-top: 220rpx;
			}
			
		}
		.box4{
			margin: 32rpx 32rpx 0;
			.title{
				image{
					width: 48rpx;
					height: 48rpx;
					margin-right: 10rpx;
				}
			}
			
			.payOptions{
				justify-content: space-around;
				margin-top: 20rpx;
				.item{
					width: 140rpx;
					height: 60rpx;
					line-height: 56rpx;
					background: rgba(247,221,94,0.2);
					border: 1px solid $colorMain;
					margin: 20rpx 0;
					// margin: 10rpx 10rpx 10rpx 0;
					text-align: center;
					border-radius: 50rpx;
				}
				.chooseItem{
					background: rgba(247,221,94,1);
				}
			}
		}
		
		.bottom-btns{
			// position: absolute;
			margin-top: 60rpx;
		}
		
	}
</style>